<template>
    <el-pagination
            :page-sizes="['30','50', '100']"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            background
            layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
</template>

<script>
    //data
    export default {
        props: ['rawPageNumber', 'rawPageSize', 'rawTotal'],
        data() {
            return {
                pageNumber: 1,
                pageSize: 30, //一页显示多少条
                total: 0,
            };
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val;
                this.$emit('childByPage', this.pageNumber, this.pageSize, this.total)
            },
            handleCurrentChange(val) {
                this.pageNumber = val;
                this.$emit('childByPage', this.pageNumber, this.pageSize, this.total)
            },
        },
        watch: {
            rawPageNumber: {
                handler: function (val, oldVal) {
                    this.pageNumber = this.rawPageNumber;
                },
                deep: true
            },
            rawPageSize: {
                handler: function (val, oldVal) {
                    this.pageSize = this.rawPageSize;
                },
                deep: true
            },
            rawTotal: {
                handler: function (val, oldVal) {
                    this.total = this.rawTotal;
                },
                deep: true
            }
        }
    };
</script>
<style lang="scss" scoped>
    .dialog-footer {
        text-align: center;
    }

    .not-block-image {
        width: 100%;
        text-align: center;
    }

    .el-icon-circle-close {
        position: absolute;
        top: 5px;
        right: 0px;
        z-index: 2;
        font-size: 20px;
    }

    .is_show {
        color: red;
    }

    .is_show_n {
        color: rgb(17, 226, 63);
    }

    .el-col {
        float: none;
        display: inline-block;
    }

    .upload-demo {
        display: inline;
    }

    #search,
    #body,
    #functional,
    #page {
        padding-top: 20px;
    }

    .el-dialog__footer {
        text-align: center;
    }
</style>
